<template>
  <div class="hello">
    <el-scrollbar>
      <b-collapse-item
        @handleChangeName="handleChangeName"
        :title="groupName"
      >
        <div style="display: flex;">
          <avatar-frame :person="person"></avatar-frame>
          <div class="add-box">+ 负责人</div>
          <div class="add-box">+ 协同人</div>
        </div>
      </b-collapse-item>
      <b-collapse-item title="销售团队">
        <div>
          内容aaaaaaaaaaaaaaa
        </div>
      </b-collapse-item>
      <b-collapse-item title="销售团队">
        <div>
          内容ssssssss
        </div>
      </b-collapse-item>
      <router-link to="/test">Go to test</router-link> <br/>
      <router-link to="/app">Go to app</router-link><br/>
      <router-link to="/table">Go to table</router-link>
    </el-scrollbar>
  </div>
</template>

<script>
import BCollapseItem from '../components/collapse/collapse-item'
import AvatarFrame from '../components/avatar/avatar-frame'
export default {
  name: 'HelloWorld',
  components: {
    BCollapseItem,
    AvatarFrame
  },
  data () {
    return {
      groupName: '团队负责人',
      person: {
        'userAvatar': '/images/default.jpg',
        'id': 29035,
        'position': '管理员',
        'userName': '陈子豪',
        'userId': '666666'
      }
    }
  },
  methods: {
    handleChangeName (groupName) {
      console.log('--------groupName---------', groupName)
      this.groupName = groupName
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.hello{
  width:800px;
  margin: 0 auto;
  background-color: #F0F2F5;
  padding: 10px;
}
.b-collapse-item{
  margin-top: 10px;
  border-radius: 2px;
}
.add-box{
  width:210px;
  height:76px;
  line-height: 76px;
  box-shadow: 0 0 1px 1px #E5E5E5;
  margin-right: 12px;
  border-radius: 4px;
  font-size: 14px;
  color:#FF8E3D;
  cursor: pointer;
}
.add-box:hover{
  box-shadow: 0 0 2px 2px #FF8E3D;
  transition: box-shadow 0.2s ease-out;
}
</style>
